<template>
  <el-dialog :title="allNull ? '创建APP' : '编辑APP'" :visible.sync="dialogVisible" width="596px" :before-close="handleClose" custom-class="dialog">
    <el-form ref="form" :model="formInfo" :rules="rules" label-width="134px" label-position="right">
      <el-form-item label="应用名称" prop="appName">
        <el-input
          v-model="formInfo.appName"
          placeholder="请输入应用名称"
          maxlength="10"
          clearable></el-input>
      </el-form-item>
      <el-form-item label="Android 应用包名" prop="androidAppName">
        <el-input
          v-model="formInfo.androidAppName"
          placeholder="请输入Android 应用包名"
          maxlength="64"
          clearable></el-input>
      </el-form-item>
      <el-form-item label="IOS 应用包名" prop="iosAppName">
        <el-input
          v-model="formInfo.iosAppName"
          placeholder="请输入IOS 应用包名"
          clearable
          maxlength="64"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="14" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="14" @click="onSubmit">保存
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addApp, updateApp } from '@/api/app/myapp'
export default {
  name: 'createApp',
  props: {
    applyData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      dialogVisible: false,
      formInfo: { // app应用数据
        appInfoId: '',
        appName: '',
        androidAppName: '',
        iosAppName: ''
      },
      rules: {
        appName: [
          { required: true, message: '请输入应用名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
          { validator: this.validateApplyName, trigger: 'blur' }
        ],
        androidAppName: [
          { required: true, message: '请输入Android 应用包名', trigger: 'blur' }
        ],
        iosAppName: [
          { required: true, message: '请输入IOS 应用包名', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 判断app是否有数据，属性全为null未创建
    allNull() {
      return Object.values(this.applyData).every(val => val === null)
    }
  },
  watch: {
    // app更新后得数据实时赋值
    applyData(newVal, oldVal) {
      this.formInfo = {
        appInfoId: newVal.appInfoId || '',
        appName: newVal.appName || '',
        androidAppName: newVal.androidAppName || '',
        iosAppName: newVal.iosAppName || ''
      }
    }
  },
  methods: {
    // 应用名称校验
    validateApplyName(rule, value, callback) {
      const flag = new RegExp(/^[\u4E00-\u9FFFa-zA-Z\p{P}]+$/u).test(value)
      if (!flag) {
        callback(new Error('请使用规范名称'))
      } else {
        callback()
      }
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false
      this.$refs['form'].resetFields()
    },
    /**
     * 创建App
     * 编辑App
     * @param appInfoId app主键id
     * @param appName 应用名称
     * @param androidAppName android应用包名
     * @param iosAppName ios应用包名
     */
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const params = {
            ...this.formInfo
          }
          const request = this.allNull ? addApp : updateApp
          request(params).then(res => {
            this.dialogVisible = false
            this.$message.success(this.allNull ? '创建成功' : '编辑成功')
            this.$emit('query-app')
          }).catch(err => {
            this.$message.error(err.message)
          })
          this.$refs['form'].resetFields()
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
